<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天构建器 - Nova Flow</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="../css/styles.css">
    <style>
        .chat-message {
            max-width: 80%;
            border-radius: 1rem;
            padding: 0.75rem 1rem;
            margin-bottom: 0.75rem;
        }
        
        .chat-message-user {
            background-color: #3b82f6;
            color: white;
            margin-left: auto;
            border-top-right-radius: 0.25rem;
        }
        
        .dark .chat-message-user {
            background-color: #2563eb;
        }
        
        .chat-message-bot {
            background-color: #e5e7eb;
            color: #1f2937;
            margin-right: auto;
            border-top-left-radius: 0.25rem;
        }
        
        .dark .chat-message-bot {
            background-color: #374151;
            color: #f3f4f6;
        }
        
        .chat-container {
            height: calc(100vh - 280px);
            overflow-y: auto;
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-6">
    <div class="flex justify-between items-center mb-6">
        <div class="flex items-center space-x-4">
            <h1 class="text-2xl font-bold">聊天构建器</h1>
            <div class="relative">
                <select class="form-input py-1 pr-8 pl-3 appearance-none bg-transparent border-b border-gray-300 dark:border-gray-600 focus:border-blue-500 focus:ring-0">
                    <option value="customer-service">客服机器人</option>
                    <option value="sales-assistant">销售助手</option>
                    <option value="new-bot">+ 新建机器人</option>
                </select>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute right-1 top-1.5 pointer-events-none text-gray-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
            </div>
        </div>
        <div>
            <button class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 inline-block" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
                保存更改
            </button>
        </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 配置面板 -->
        <div class="col-span-1">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
                <h2 class="text-lg font-semibold mb-4">基本配置</h2>
                
                <div class="mb-4">
                    <label for="botName" class="block text-sm font-medium mb-1">机器人名称</label>
                    <input type="text" id="botName" class="form-input py-1 text-sm w-full" value="客服机器人">
                </div>
                
                <div class="mb-4">
                    <label for="botDescription" class="block text-sm font-medium mb-1">描述</label>
                    <textarea id="botDescription" class="form-input py-1 text-sm w-full h-20 resize-none">专门回答客户问题，处理售前售后咨询的AI助手。</textarea>
                </div>
                
                <div class="mb-4">
                    <label for="modelSelect" class="block text-sm font-medium mb-1">使用模型</label>
                    <select id="modelSelect" class="form-input py-1 text-sm w-full">
                        <option>GPT-4</option>
                        <option selected>GPT-3.5 Turbo</option>
                        <option>本地 LLaMA 2</option>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label for="knowledgeBase" class="block text-sm font-medium mb-1">关联知识库</label>
                    <select id="knowledgeBase" class="form-input py-1 text-sm w-full">
                        <option value="">无</option>
                        <option value="product" selected>产品知识库</option>
                        <option value="customer-service">客服知识库</option>
                        <option value="sales">销售资料</option>
                    </select>
                </div>
                
                <div class="mb-4">
                    <label for="workflow" class="block text-sm font-medium mb-1">关联工作流</label>
                    <select id="workflow" class="form-input py-1 text-sm w-full">
                        <option value="">无</option>
                        <option value="customer-service" selected>客服流程</option>
                        <option value="lead-qualification">线索资格审查</option>
                    </select>
                </div>
            </div>
            
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 mb-6">
                <h2 class="text-lg font-semibold mb-4">系统提示</h2>
                
                <div class="mb-4">
                    <label for="systemPrompt" class="block text-sm font-medium mb-1">系统指令</label>
                    <textarea id="systemPrompt" class="form-input py-1 text-sm w-full h-32 resize-none">你是一个专业的客服助手，负责回答用户关于我们产品的问题。请保持礼貌和专业的态度，提供简洁明了的回答。如果你不确定某个问题的答案，可以从知识库中查询或建议用户联系人工客服。不要编造不存在的产品信息。</textarea>
                </div>
                
                <div class="mb-4">
                    <label for="exampleConversations" class="block text-sm font-medium mb-1">示例对话</label>
                    <div class="flex mb-2">
                        <span class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded text-xs font-medium mr-2">用户</span>
                        <input type="text" class="form-input py-1 text-sm flex-1" value="你们的退款政策是什么？">
                    </div>
                    <div class="flex mb-2">
                        <span class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded text-xs font-medium mr-2">助手</span>
                        <input type="text" class="form-input py-1 text-sm flex-1" value="我们提供30天无理由退款保证。购买后30天内，如果您对产品不满意，可以申请全额退款。您可以通过官网的"我的订单"页面或联系客服申请退款。">
                    </div>
                    <button class="text-blue-500 text-sm hover:text-blue-600 mt-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                        添加示例对话
                    </button>
                </div>
            </div>
            
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                <h2 class="text-lg font-semibold mb-4">高级设置</h2>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-1">模型参数</label>
                    <div class="space-y-3">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm">温度</span>
                                <span class="text-sm">0.7</span>
                            </div>
                            <input type="range" min="0" max="2" step="0.1" value="0.7" class="w-full">
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm">最大回复长度</span>
                                <span class="text-sm">1000</span>
                            </div>
                            <input type="range" min="100" max="4000" step="100" value="1000" class="w-full">
                        </div>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">功能开关</label>
                    <div class="space-y-2">
                        <div class="flex items-center justify-between">
                            <span class="text-sm">流式响应</span>
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="hidden peer" checked>
                                <div class="relative w-10 h-5 bg-gray-200 peer-checked:bg-blue-600 rounded-full peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all dark:bg-gray-700"></div>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm">记忆上下文</span>
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="hidden peer" checked>
                                <div class="relative w-10 h-5 bg-gray-200 peer-checked:bg-blue-600 rounded-full peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all dark:bg-gray-700"></div>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm">知识库增强</span>
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="hidden peer" checked>
                                <div class="relative w-10 h-5 bg-gray-200 peer-checked:bg-blue-600 rounded-full peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all dark:bg-gray-700"></div>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm">函数调用</span>
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="hidden peer">
                                <div class="relative w-10 h-5 bg-gray-200 peer-checked:bg-blue-600 rounded-full peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all dark:bg-gray-700"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 聊天测试区域 -->
        <div class="col-span-2">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow h-full flex flex-col">
                <!-- 聊天头部 -->
                <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                            </svg>
                        </div>
                        <div>
                            <h2 class="font-medium">客服机器人</h2>
                            <p class="text-xs text-gray-500 dark:text-gray-400">测试对话模式</p>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <button class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md" title="清空对话">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                            </svg>
                        </button>
                        <button class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md" title="重新开始">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
                            </svg>
                        </button>
                    </div>
                </div>
                
                <!-- 聊天内容 -->
                <div class="chat-container p-4 flex-1">
                    <div class="flex flex-col">
                        <div class="chat-message chat-message-bot">
                            <p>你好！我是客服助手，很高兴为您服务。请问有什么可以帮助您的吗？</p>
                        </div>
                        
                        <div class="chat-message chat-message-user">
                            <p>你们的产品支持退款吗？</p>
                        </div>
                        
                        <div class="chat-message chat-message-bot">
                            <p>是的，我们提供30天无理由退款政策。如果您在购买后30天内对产品不满意，可以申请全额退款。您可以通过以下步骤申请退款：</p>
                            <ol class="list-decimal list-inside mt-2 ml-2">
                                <li>登录您的账户</li>
                                <li>进入"我的订单"页面</li>
                                <li>找到需要退款的订单并点击"申请退款"</li>
                                <li>填写退款原因并提交</li>
                            </ol>
                            <p class="mt-2">如果您在退款过程中遇到任何问题，欢迎随时联系我们的人工客服。</p>
                        </div>
                        
                        <div class="chat-message chat-message-user">
                            <p>退款需要多长时间到账？</p>
                        </div>
                        
                        <div class="chat-message chat-message-bot">
                            <p>退款时间取决于您的支付方式：</p>
                            <ul class="list-disc list-inside mt-2 ml-2">
                                <li>信用卡付款：退款审核通过后3-5个工作日内退回到您的信用卡账户</li>
                                <li>支付宝/微信支付：通常1-2个工作日内到账</li>
                                <li>银行转账：3-7个工作日内到账</li>
                            </ul>
                            <p class="mt-2">退款申请审核通常在1-2个工作日内完成。如果超过预期时间仍未收到退款，请联系我们的客服团队。</p>
                        </div>
                    </div>
                </div>
                
                <!-- 聊天输入框 -->
                <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                    <div class="flex">
                        <div class="relative flex-1">
                            <textarea placeholder="输入消息..." class="form-input py-2 pl-3 pr-10 w-full resize-none h-11 overflow-hidden"></textarea>
                            <button class="absolute right-3 top-2.5 text-blue-500 hover:text-blue-600">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </button>
                        </div>
                        <button class="ml-2 bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2.5">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
                            </svg>
                        </button>
                    </div>
                    <div class="flex justify-between mt-3 text-xs text-gray-500 dark:text-gray-400">
                        <span>提示: 可以通过聊天测试机器人效果</span>
                        <div>
                            <span class="mr-3">调试模式</span>
                            <label class="inline-flex items-center cursor-pointer">
                                <input type="checkbox" class="sr-only peer">
                                <div class="relative w-9 h-5 bg-gray-200 peer-checked:bg-blue-600 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 聊天测试功能
        document.addEventListener('DOMContentLoaded', function() {
            const chatContainer = document.querySelector('.chat-container');
            const messageInput = document.querySelector('textarea');
            const sendButton = messageInput.nextElementSibling.nextElementSibling;
            
            // 自动调整文本区域高度
            messageInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
                // 限制最大高度
                if (parseInt(this.style.height) > 100) {
                    this.style.height = '100px';
                    this.style.overflowY = 'auto';
                } else {
                    this.style.overflowY = 'hidden';
                }
            });
            
            // 发送消息
            function sendMessage() {
                const message = messageInput.value.trim();
                if (!message) return;
                
                // 添加用户消息
                const userMessage = document.createElement('div');
                userMessage.className = 'chat-message chat-message-user';
                userMessage.innerHTML = `<p>${message}</p>`;
                chatContainer.querySelector('.flex-col').appendChild(userMessage);
                
                // 清空输入框
                messageInput.value = '';
                messageInput.style.height = 'auto';
                
                // 滚动到底部
                chatContainer.scrollTop = chatContainer.scrollHeight;
                
                // 模拟机器人回复（实际应用中需要调用API）
                setTimeout(() => {
                    const botMessage = document.createElement('div');
                    botMessage.className = 'chat-message chat-message-bot';
                    botMessage.innerHTML = `<p>这是一个自动回复示例。在实际应用中，这里会通过API调用获取真实的机器人回复。</p>`;
                    chatContainer.querySelector('.flex-col').appendChild(botMessage);
                    
                    // 滚动到底部
                    chatContainer.scrollTop = chatContainer.scrollHeight;
                }, 1000);
            }
            
            // 点击发送按钮
            sendButton.addEventListener('click', sendMessage);
            
            // 按Enter键发送
            messageInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            
            // 清空对话按钮
            const clearButton = document.querySelector('button[title="清空对话"]');
            clearButton.addEventListener('click', function() {
                const chatMessages = chatContainer.querySelector('.flex-col');
                // 保留第一条欢迎消息
                const welcomeMessage = chatMessages.firstChild;
                chatMessages.innerHTML = '';
                chatMessages.appendChild(welcomeMessage);
            });
            
            // 重新开始按钮
            const restartButton = document.querySelector('button[title="重新开始"]');
            restartButton.addEventListener('click', function() {
                const chatMessages = chatContainer.querySelector('.flex-col');
                // 只保留欢迎消息
                const welcomeMessage = chatMessages.querySelector('.chat-message-bot:first-child').cloneNode(true);
                chatMessages.innerHTML = '';
                chatMessages.appendChild(welcomeMessage);
            });
        });
        
        // 处理主页面发送的主题变更消息
        window.addEventListener('message', function(event) {
            if (event.data.type === 'themeChange') {
                if (event.data.darkMode) {
                    document.documentElement.classList.add('dark');
                } else {
                    document.documentElement.classList.remove('dark');
                }
            }
        });
        
        // 初始化检查暗色模式
        if (window.parent && window.parent.document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.add('dark');
        }
    </script>
</body>
</html> 